
<style  lang="less">
.edit_class {
  .ivu-form-item {
    margin-bottom: 10px;
  }
  //   错误提示显示问题
  .ivu-form-item-error-tip {
    position: relative !important;
  }
  .ivu-card-edit:nth-child(1){
    border-radius:4px 0 0 4px;
  }
  .ivu-card-edit1{
    border-radius: 0 4px 4px 0;
  }
  .ivu-card-head{
    background:rgba(222,222,222,1);
  }
  
}
</style>
<template>
  <Modal
    :value="isShowEdit"
    title="编辑班次"
    :closable="false"
    :mask-closable="false"
    width="600"
    class="edit_class"
  >
    <!-- aa -->
    <Form ref="formItem" :model="formItem" :label-width="80" :rules="ruleValidate">
      <FormItem label="车牌号" prop="busId">
        <Input
          v-model="formItem.busId"
          suffix="ios-arrow-down"
          placeholder="请选择车辆"
          width="inputWidth"
          clearable
          readonly="readonly"
          @click.native.stop="openCar"
          :style="formStyle"
        />
      </FormItem>
      <FormItem label="车次" prop="tripCount">
        <InputNumber
          v-model="formItem.tripCount"
          :max="1000"
          :min="1"
          :style="formStyle"
          placeholder="请输入车次"
        ></InputNumber>
      </FormItem>
      <Row>
        <Col span="12">
        <Card :bordered="true" class="ivu-card-edit">
          <p slot="title">驾驶员</p>
          <FormItem label="驾驶员" prop="driverName">
            <Input
              v-model="formItem.driverName"
              suffix="ios-arrow-down"
              placeholder="请选择驾驶员"
              width="inputWidth"
              clearable
              @click.native="()=>{openMan('1')}"
              readonly="readonly"
              :style="formStyle"
            />
          </FormItem>
          <FormItem label="实际上班" prop="driverStart">
            <TimePicker
              v-model="formItem.driverStart"
              type="time"
              placeholder="请选择计划上班时间"
              width="inputWidth"
              format="HH:mm"
              :style="formStyle"
            ></TimePicker>
          </FormItem>
          <FormItem label="实际下班" prop="driverEnd">
            <TimePicker
              v-model="formItem.driverEnd"
              type="time"
              placeholder="请选择计划下班时间"
              width="inputWidth"
              format="HH:mm"
              :style="formStyle"
            ></TimePicker>
          </FormItem>
        </Card>
        </Col >
        <Col span="12">
        <Card :bordered="true" class="ivu-card-edit1">
          <p slot="title">乘务员</p>
          <FormItem label="乘务员" prop="stewardName">
            <Input
              v-model="formItem.stewardName"
              suffix="ios-arrow-down"
              placeholder="请选择乘务员"
              width="inputWidth"
              clearable
              @click.native="()=>{openMan('2')}"
              readonly="readonly"
              :style="formStyle"
            />
          </FormItem>
          <FormItem label="实际上班" prop="stewardStart">
            <TimePicker
              v-model="formItem.stewardStart"
              type="time"
              placeholder="请选择计划上班时间"
              width="inputWidth"
              format="HH:mm"
              :style="formStyle"
            ></TimePicker>
          </FormItem>
          <FormItem label="实际下班" prop="stewardEnd">
            <TimePicker
              v-model="formItem.stewardEnd"
              type="time"
              placeholder="请选择计划下班时间"
              width="inputWidth"
              format="HH:mm"
              :style="formStyle"
            ></TimePicker>
          </FormItem>
        </Card>
        </Col>
      </Row>
    </Form>
    <div slot="footer">
      <Button type="text" size="large" @click="cancel">取消</Button>
      <Button type="primary" size="large" @click="ok">确定</Button>
    </div>
    <!-- 选择车辆 -->
    <ChooseCar :open_type="add" @callBack="chooseCallBack" ref="choose"/>
    <!-- 人员选择 -->
    <ChooseMan :open_type="add" @callBack="chooseCallBack"/>
    <Spin size="large" fix v-if="isInAdd"></Spin>
  </Modal>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import ChooseCar from "./chooseCar"; //车辆选择
import ChooseMan from "./chooseMan"; //人员选择
import formConf from "../config/formConfig.js";
import moment from "moment";
import common from "../../../request/common";
export default {
  data() {
    return {
      isShow: true,
      isInAdd: false,
      car: {},
      driver: {},
      steward: {},
      formItem: {
        busId: "",
        tripCount: "",
        driverName: "",
        stewardName: "",
        stewardStart: "",
        stewardEnd: "",
        driverEnd:"",
        driverStart:""
      },
      ruleValidate: {
        shiftName: [{ required: true, message: "班次不能为空" }],
        busId: [{ required: true, message: "车牌号不能为空" }],
        tripCount: [{ required: true, message: "车次不能为空" }],
        driverName: [{ required: true, message: "驾驶员不能为空" }],
        stewardName: [{ required: false, message: "乘务员不能为空" }],
        timeStart: [
          {
            required: true,
            type: "string",
            message: "计划上班时间不能为空",
            trigger: "change"
          }
        ],
        timeEnd: [
          {
            required: true,
            type: "string",
            message: "计划下班时间不能为空",
            trigger: "change"
          }
        ]
      },
      formStyle: {
        width: "150px"
      },
      inputWidth: 150
    };
  },

  methods: {
    ok: function() {
      this.$refs.formItem.validate((a, b, c) => {
        if (!a) return;
        this.isInAdd = true;
        //添加班次
        var param = {
          busId: this.formItem.busId,
          driverIcsn: this.driver.icSn,
          driverId: this.driver.id,
          driverName: this.driver.name,
          isCopy: 0,
          lineId: this.curLine,
          meType: 0,
          runDate: moment().format("YYYY-MM-DD"),
          shiftName: this.formItem.shiftName,
          shiftType: 1,
          stewardIcsn: this.steward.icSn,
          stewardId: this.steward.id,
          stewardName: this.steward.name,
          timeEnd: this.formItem.timeEnd,
          timeStart: this.formItem.timeStart,
          tripCount: this.formItem.tripCount
        };
        common
          .addClass(param)
          .then(data => {
            this.$Message.success("添加班次成功！");
            this.showModal(false);
            this.isInAdd = false;
            //重新加载数据
            var param = {
              lineId: this.curLine,
              runDate: moment().format("YYYY-MM-DD")
            };
            debugger;
            //调用父组件更新数据
            this.$emit("refresh", param);
          })
          .catch(data => {
            this.isInAdd = false;
          });
      });
    },
    setdata:function(){
      this.formItem = this.curSelClass
    },
    cancel: function() {
      this.showModal(false);
    },
    openCar: function(e) {
      if (e.target.nodeName != "INPUT") return;
      this.$store.dispatch("attendance/setItem_act", {
        key: "isShowCar",
        value: "add"
      });
      this.$store.dispatch("attendance/setCarList_act", {});
    },
    openMan: function(val) {
      this.$store.dispatch("attendance/setItem_act", {
        key: "isShowMan",
        value: "add"
      });
      this.$store.dispatch("attendance/setItem_act", {
        key: "manType",
        value: val
      });
      this.$store.dispatch("attendance/setManList_act", {
        position: val,
        teamIds: this.teamIds
      });
    },
    //隐藏显示
    showModal: function(isShow) {
      this.$store.dispatch("attendance/setItem_act", {
        key: "isShowEdit",
        value: isShow
      });
    },
    //选择车辆、人员回调
    chooseCallBack(param, type) {
      switch (type) {
        case "car": {
          this.car = param;
          this.formItem.busId = param.busSelfId;
          break;
        }
        case "driver": {
          this.driver = param;
          this.formItem.driverName = param.name;
          break;
        }
        case "steward": {
          this.steward = param;
          this.formItem.stewardName = param.name;
          break;
        }
      }
    }
  },
  //计算属性
  computed: {
    ...mapState({
      //这里的...是超引用，ES6的语法，意思是state里有多少属性值我可以在这里放多少属性值
      isShowEdit: state => state.attendance.isShowEdit,
      isShowCar: state => state.attendance.isShowCar,
      teamIds: state => state.attendance.teamIds,
      curLine: state => state.attendance.curLine,
      curSelClass: state => state.attendance.curSelClass
      //里面定义的showFooter是指footerStatus.js里state的showFooter
      //你也可以用下面的mapGetters来获取isShow的值，貌似下面的更简洁
      /*...mapGetters('footerStatus',{ //footerStatus指的是modules文件夹下的footerStatus.js模块
         isShow:'isShow' //第一个isShow是我自定义的只要对应template里v-if="isShow"就行，
                         //第二个isShow是对应的footerStatus.js里的getters里的isShow
      })*/
    })
  },
  components: {
    ChooseCar: ChooseCar,
    ChooseMan: ChooseMan
  }
};
</script>
